<!--
 * @Description: 数据库备份
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:29:53
 * @LastEditTime: 2021-09-28 10:53:35
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <div class="info">
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <!-- 数据库自动备份 -->
        <el-tab-pane label="自动备份" name="auto">
          <!-- 数据库自动备份属于全量备份，包括备份数据记录和表结构。 -->
          <el-alert title="数据库自动备份属于全量备份，包括备份数据记录和表结构" type="info" center show-icon></el-alert>
          <!-- 备份服务器 -->
          <span>
            备份服务器
            <label>{{autoform.backupServer === null ? '--' : autoform.backupServer}}</label>
          </span>
          <!-- 服务器路径 -->
          <span>
            服务器路径
            <label>{{autoform.backupPath === null ? '--' : autoform.backupPath}}</label>
          </span>
          <el-form
            :model="autoform"
            class="form"
            :rules="rules"
            ref="autoForm"
            label-width="90px"
            label-position="right"
          >
            <!-- 定时备份 -->
            <el-form-item label="定时备份" prop="active">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-switch
                  v-model="autoform.active"
                  :disabled="!isEdit"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-col>
            </el-form-item>
            <!-- 超时时间 -->
            <el-form-item label="超时时间" prop="timeout">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-input-number v-model="autoform.timeout" :disabled="!isEdit" :min="3" :max="60" />
              </el-col>
            </el-form-item>
            <!-- 执行时间 -->
            <el-form-item label="执行时间" prop="triggerTime">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-time-picker v-model="autoform.triggerTime" :disabled="!isEdit"></el-time-picker>
              </el-col>
            </el-form-item>
            <el-form-item>
              <!-- '保存' : '编辑' -->
              <el-button
                type="primary"
                style="width: 90px"
                @click="handleAuto"
              >{{isEdit ? '保存' : '编辑'}}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 数据库手动备份 -->
        <el-tab-pane label="手动备份" name="back">
          <!-- 数据库手动备份属于全量备份，包括备份数据记录和表结构。 -->
          <el-alert title="数据库手动备份属于全量备份，包括备份数据记录和表结构。" type="info" center show-icon></el-alert>
          <!-- 服务器路径 -->
          <span>
            服务器路径
            <label>{{backform.backupPath === null ? '--' : backform.backupPath}}</label>
          </span>
          <el-form
            :model="backform"
            class="form"
            :rules="rules"
            ref="ruleForm"
            label-width="90px"
            label-position="right"
          >
            <!-- 超时时间 -->
            <el-form-item label="超时时间" prop="timeout">
              <el-col :xs="24" :sm="12" :lg="6">
                <el-input-number v-model="backform.timeout" :disabled="!isEdit" :min="3" :max="60" />
              </el-col>
            </el-form-item>
            <!-- 执行结果 -->
            <el-form-item label="执行结果" prop="result">
              <!-- 执行完成 -->
              <i :class="backform.result === '执行完成' ? 'success' : 'default'">{{backform.result}}</i>
            </el-form-item>
            <el-form-item>
              <!-- '执行' : '编辑 -->
              <el-button
                type="primary"
                style="width: 90px"
                @click="handleBack"
              >{{isEdit ? '执行' : '编辑'}}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data () {
    return {
      activeName: 'auto',
      isEdit: false,
      loading: false,
      autoform: {
        active: true,
        backupServer: null,
        backupPath: null,
        timeout: 3,
        triggerTime: null
      },
      backform: {
        active: true,
        backupServer: null,
        backupPath: null,
        timeout: 3,
        triggerTime: null
      },
      rules: {
        timeout: [
          { required: true, message: '请输入超时时间', trigger: 'blur' }
        ],
        triggerTime: [
          { required: true, message: '请输入任意时间点', trigger: 'change' }
        ]
      }
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.dataAutoConfig();
    });
  },
  methods: {
    timeProcess (m) {
      // eslint-disable-next-line no-undefined
      if (m !== '' || m !== undefined) {
        let ms = m.substring(0, 2);
        let me = m.substring(3, 5);
        let mm = m.substring(6);
        return new Date(2021, 1, 1, Number(ms), Number(me), Number(mm));
      }
    },
    dataAutoConfig () {
      let _this = this;
      let params = {
        type: 'PG_SQL_BACKUP'
      };
      _this.$http.post({
        url: '/api/resource/backup/database/info',
        data: params
      }).then(res => {
        _this.autoform = {
          active: res.active,
          backupServer: res.backupServer,
          backupPath: res.backupPath,
          timeout: res.timeout,
          triggerTime: _this.timeProcess(res.triggerTime),
          expireTime: res.expireTime,
          lifecycle: res.lifecycle,
          maxCtx: res.maxCtx,
          monthAt: res.monthAt,
          type: res.type,
          weekAt: res.weekAt
        };
      });
    },
    dataBackConfig () {
      let _this = this;
      _this.$http.post({
        url: '/api/resource/backup/database/manual/path',
      }).then(res => {
        _this.backform = {
          backupPath: res,
          timeout: 0,
          result: '未执行'
        };
      });
    },
    handleClick (tab) {
      let _this = this;
      _this.activeName = tab.name;
      _this.isEdit = false;
      if (tab.name === 'auto') {
        _this.dataAutoConfig();
        _this.rules = {
          timeout: [
            { required: true, message: '请输入超时时间', trigger: 'blur' }
          ],
          triggerTime: [
            { required: true, message: '请输入任意时间点', trigger: 'change' }
          ]
        };
      } else {
        _this.dataBackConfig();
        _this.rules = {
          timeout: [
            { required: true, message: '请输入超时时间', trigger: 'blur' }
          ]
        };
      }
    },
    // 自动备份
    handleAuto () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['autoForm'].validate(valid => {
          if (valid) {
            let params = {
              active: _this.autoform.active,
              timeout: _this.autoform.timeout,
              lifecycle: _this.autoform.lifecycle,
              backupPath: _this.autoform.backupPath,
              backupServer: _this.autoform.backupServer,
              monthAt: _this.autoform.monthAt,
              weekAt: _this.autoform.weekAt,
              triggerTime: dayjs(_this.autoform.triggerTime).format('HH:mm:ss'),
              type: _this.autoform.type,
              maxCtx: _this.autoform.maxCtx,
              expireTime: _this.autoform.expireTime
            };
            _this.isEdit = !_this.isEdit;
            _this.$http.put({
              url: '/api/resource/backup/database/create',
              data: params
            }).then(() => {
              _this.$message.success('设置成功！');
              _this.dataAutoConfig();
            });
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    },
    // 手动备份
    handleBack () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            _this.backform.result = '执行中';
            _this.isEdit = !_this.isEdit;
            let param = {
              timeout: _this.backform.timeout
            };
            _this.$http.post({
              url: '/api/resource/backup/database/manual',
              data: param
            }).then(res => {
              _this.$message.success('执行成功！');
              _this.backform.result = '执行完成';
            });
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.isEdit = !_this.isEdit;
      }
    }
  },
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    span {
      display: block;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 0 0 50px;
      margin-bottom: 10px;
      label {
        padding-left: 12px;
      }
    }

    .default {
      color: #2c89e6;
    }

    .success {
      color: #00a65a;
    }

    .form {
      padding: 0 40px 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 0 20px 30px 20px;
      }
    }
  }
}
</style>